<!-- eslint-disable vue/valid-v-for -->
<template>
  <div>
    <el-table
      v-loading="_option.loading"
      :data="tableData"
      :stripe="_option.stripe"
      :height="_option.height"
      :maxHeight="_option?.maxHeight"
      :size="_option.size"
      :showHeader="_option.showHeader"
      :tooltipEffect="_option.tooltipEffect"
      :header-cell-style="_option.headStyle"
      :highlight-current-row="_option.highlight"
      :row-class-name="tableRowClassName"
      :row-style="_option.rowStyle"
      @selection-change="handleSelectionChange"
      @row-click="handleRowClick"
      @cell-click="handleCellClick"
      ref="tableRef"
    >
      <template v-for="(col, index) in column" :key="index">
        <!---复选框, 序号 (START)-->
        <el-table-column
          v-if="col.type === 'index' || col.type === 'expand'"
          :align="col.align"
          :label="col.label"
          :type="col.type"
          :index="indexMethod"
          :width="col.width"
        />
        <el-table-column
          v-else-if="col.type === 'selection'"
          :align="col.align"
          :label="col.label"
          :type="col.type"
          :width="col.width"
          :selectable="col.selectable"
        />
        <!---复选框, 序号 (END)-->
        <!---图片 (START)-->
        <el-table-column
          v-else-if="col.type === 'image'"
          :align="col.align"
          :label="col.label"
          :width="col.width"
        >
          <template #default="{ row }">
            <!-- 如需更改图片size，可自行配置参数 -->
            <el-avatar :size="50" shape="square" :src="row[col.prop!]"/>
          </template>
        </el-table-column>
        <!---图片 (END)-->
        <!-- 自定义slot (START) -->
        <el-table-column
          :show-overflow-tooltip="col.showOverflowTooltip"
          v-else-if="col.slot"
          :align="col.align"
          :label="col.label"
          :width="col.width"
        >
          <template #default="scope">
            <slot :name="col.slot" :row="scope.row" :index="scope.$index"></slot>
          </template>
        </el-table-column>
        <!-- 自定义slot (END) -->
        <!-- 如果传递按钮数组，就展示按钮组 START-->
        <el-table-column
          :show-overflow-tooltip="col.showOverflowTooltip"
          v-else-if="col.buttons?.length"
          :align="col.align"
          :label="col.label"
          :width="col.width"
        >
          <template #default="scope">
            <el-button-group v-for="(btn, index1) in col.buttons" :key="index1">
              <!-- <el-button
                v-for="(btn, index1) in col.buttons"
                :link="btn.link"
                :icon="btn.icon"
                :key="index1"
                :type="btn.type"
                @click="handleAction(btn.command, scope)"
                class="ml-2"
                >{{ btn.name }}</el-button
              > -->
              <svg
                aria-hidden="true"
                @click="handleAction(btn.command, scope)"
                class="ml-4 w-4 h-4"
                v-if="!btn.slot"
              >
                <use :xlink:href="`#icon-${btn.type}`"/>
              </svg>
              <slot :name="btn.slot" :row="scope.row" :index="scope.$index" v-else></slot>
            </el-button-group>
          </template>
        </el-table-column>
        <!-- 如果传递按钮数组，就展示按钮组 END-->
        <!-- 默认渲染列 (START) -->
        <el-table-column
          :show-overflow-tooltip="col.showOverflowTooltip"
          v-else
          :label="col.label"
          :prop="col.prop"
          :align="col.align"
          :width="col.width"
        />
        <!-- 默认渲染列 (END) -->
      </template>
    </el-table>
    <!-- 分页器 -->
    <div v-if="_option.showPagination" class="mt-5 float-right">
      <el-pagination
        v-bind="_paginationConfig"
        @size-change="pageSizeChange"
        @current-change="currentPageChange"
      />
    </div>
  </div>
</template>
<script lang="ts" setup>
import {computed, ComputedRef, defineExpose, ref} from 'vue'

const tableRef: any = ref(null)

interface TableProps {
  tableData: Array<object> // table的数据
  column: Table.Column[] // 每列的配置项
  option?: Table.Option
}

const props = defineProps<TableProps>()
// 设置option默认值，如果传入自定义的配置则合并option配置项
const _option: ComputedRef<Table.Option> = computed(() => {
  const option = {
    stripe: false,
    tooltipEffect: 'dark',
    showHeader: true,
    showPagination: false,
    highlight: false,
    headStyle: {background: '#F2F3F5', color: '#1D2129'},
    rowStyle: () => 'cursor:pointer' // 行样式
  }
  return Object.assign(option, props?.option)
})
// 合并分页配置
const _paginationConfig = computed(() => {
  const config = {
    total: 0,
    currentPage: 1,
    pageSize: 10,
    pagerCount: 7,
    pageSizes: [10, 20, 30, 40, 50, 100],
    layout: 'total, sizes, prev, pager, next, jumper ',
    background: true,
    small: false
  }
  return Object.assign(config, _option.value.paginationConfig)
})

interface EmitEvent {
  (e: 'selection-change', params: any): void // 当选择项发生变化时会触发该事件
  (e: 'row-click', row: any, column: any, event: Event): void // 当某一行被点击时会触发该事件
  (e: 'cell-click', row: any, column: any, cell: any, event: Event): void // 当某个单元格被点击时会触发该事件
  (e: 'command', command: string | number, row: any): void // 按钮组事件
  (e: 'size-change', pageSize: number): void // pageSize事件
  (e: 'current-change', currentPage: number): void // currentPage按钮组事件
}

const emit = defineEmits<EmitEvent>()

// 自定义索引
function indexMethod(index: number) {
  const tabIndex =
    index + (_paginationConfig.value.currentPage - 1) * _paginationConfig.value.pageSize + 1
  return tabIndex
}

// 切换pageSize
const pageSizeChange = (pageSize: number) => {
  emit('size-change', pageSize)
}
// 切换currentPage
const currentPageChange = (currentPage: number) => {
  emit('current-change', currentPage)
}
// 按钮组事件
const handleAction = (command: string | number, scope: any) => {
  emit('command', command, scope.row)
}
// 多选事件
const handleSelectionChange = (val: any) => {
  emit('selection-change', val)
}
// 当某一行被点击时会触发该事件
const handleRowClick = (row: any, column: any, event: Event) => {
  emit('row-click', row, column, event)
}
// 当某个单元格被点击时会触发该事件
const handleCellClick = (row: any, column: any, cell: any, event: Event) => {
  emit('cell-click', row, column, cell, event)
}
//Selection判断是否可勾选
const rowSelection = (row: any) => {
  tableRef.value.toggleRowSelection(row)
}
//为row添加一个index
const tableRowClassName = ({row, rowIndex}) => {
  row.index = rowIndex
  return 'rows'
}
defineExpose({
  rowSelection
})
</script>
<style lang="less" scoped></style>
